<div *ngIf="showLimit">
    <img src="assets/img/icon-subindustry-avg.png" height="20px" style="float:left">
    <p class="header" style="margin-left:15px; font-size:10pt">
        {{ subPeerGroup }} Subindustry Average
    </p>
</div>

<!-- different width depending on the expand capabilities of indicators/MEIs -->
<div *ngIf="currentComponent == 'keyIssues'" class="row">
    <div class="col-md-3"></div>
    <div class="col-md-9">
        <div *ngFor="let column of columns" class="boldText" [ngClass]="{'col-md-3':columns.length === 4, 'col-md-4':columns.length === 3}"
            style="padding:0px">{{column.name}}</div>
    </div>
</div>
<div *ngIf="currentComponent == 'meiIndicators' && columns && columns.length > 0" class="row">
    <div class="col-md-1"></div>
    <div class="col-md-11" style="padding: 0px;margin-left: -20px;">
        <div class="col-md-3"></div>
        <div *ngFor="let column of columns" class="col-md-3 boldText" style="padding:0px">{{column.name}}</div>
    </div>
</div>

<!-- Axis offset -->
<div *ngIf="columns && columns.length > 0" class="row" style="height:20px"></div>

<!-- Baseline -->
<div class="row">
    <indicator-details *ngIf="baseline" [canExpand]="false" [indicator]="baseline" [columns]="columns" [showAxis]="true" [indicatorIndex]="0"
        [subTitle]="'Material Environmental and Social Issues'" class="col-md-12 borderTop" style="width:100%;padding:0px"></indicator-details>
</div>

<!-- MEI/INDICATORS -->
<div *ngFor="let issue of elements; let i = index;" class="row borderBottomDashed indicatorDetails" [ngClass]="{'borderTop': i == 0, 'hidden': currentComponent == 'keyIssues' && (i > 2) && !showAllIndicators}">
    
    <!-- COMPANY MEI OR STANDARD INDICATOR OF MEI -->
    <indicator-details *ngIf="meiType != 'BaselineIssue' && (currentComponent == 'keyIssues' || (currentComponent == 'meiIndicators' && issue.indicatorType == 0))"
        [canExpand]="currentComponent == 'meiIndicators' && issue.indicatorType == 0" [indicator]="issue" [columns]="columns"
        [indicatorIndex]="i + 1" [showAxis]="baseline == undefined && i == 0" [companyId]="companyId" [externalId]="externalId"
        class="col-md-12" style="width:100%;padding:0px"></indicator-details>    

    <!-- PILLARS OF GC-->
    <pillar-details *ngIf="meiType == 'BaselineIssue'" [canExpand]="currentComponent == 'meiIndicators' && issue.indicatorType == 0" [indicator]="issue" [columns]="columns"
    [indicatorIndex]="i + 1" [showAxis]="baseline == undefined && i == 0" [companyId]="companyId" [externalId]="externalId"
    class="col-md-12" style="width:100%;padding:0px"></pillar-details>

    <!-- EVENT INDICATORS OF MEI -->    
    <event-details id="{{issue.code}}" *ngIf="currentComponent == 'meiIndicators' && issue.indicatorType == 1" [eventIndicator]="issue" [eventIndex]="i+1"
        [companyId]="companyId" [showAxis]="baseline == undefined && i == 0" [defaultExpanded]="meiType == 'IdiosyncraticIssue' || indicatorToExpand == issue.code"
        [noExpand]="issue.category == 0" class="col-md-12" style="width:100%; padding:0px"></event-details>

  

</div>

<!-- SUMMARY -->
<div class="row" *ngIf="mei">
    <div class="col-sm-1 expandLink">&nbsp;</div>
    <div class="col-sm-11" style="padding: 0; margin-left: -20px;">
        <div class="row" style="margin:0px;">
            <div class="col-md-3 rowHeader" style="padding:0px 0px 10px 0px;">&nbsp;</div>
            <div class="col-md-3 chartCell" style="padding: 0px">&nbsp;</div>
            <div class="col-md-3 chartCell">
                <div class="col-md-9 issueRating text-right">
                    <strong>Total Weight</strong>
                </div>
                <div class="col-md-3 issueRating">
                    <strong>100 %</strong>
                </div>
            </div>
            <div class="col-md-3 chartCell">
                <div class="col-md-9 issueRating text-right">
                    <strong>Management Score</strong>
                </div>
                <div class="col-md-3 issueRating">
                    <strong>{{ mei.management | number:'1.1-2' }}</strong>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row" *ngIf="showAllIndicators && !mei">
    <div class="col-md-3 text-right boldText" style="padding:10px 10px">Totals</div>
    <div class="col-md-9">
        <div class="col-md-3 chartCell" style="padding: 10px 05px">
            <strong>100%</strong>
        </div>
        <div class="col-md-3 chartCell" style="padding: 10px 15px">
            <strong>{{ company.exposure | number:'1.1-2' }}</strong>
        </div>
        <div class="col-md-3 chartCell" style="padding: 10px 15px">
            <strong>{{ company.managedRisk | number:'1.1-2' }}</strong>
        </div>
        <div class="col-md-3 text-right" style="padding: 10px 10px">
            <strong>{{ company.riskRating | number:'1.1-2' }} {{ clusterName }} Risk</strong>
        </div>
    </div>
</div>

<div class="text-center" style="margin-top: 8px;" *ngIf="currentComponent == 'keyIssues'">
    <a (click)="toggleIndicatorsDisplay()" href="javascript:;;" style="font-size:10pt">Show {{ showAllIndicators ? 'Less' : 'More' }}</a>
</div>